import React, { Component } from "react";

class App2 extends Component {
  state = {
    count: 10,
  };

  // fn1 = (num) => {
  //   console.log(num);
  // };

  // 柯里化函数(闭包)
  // fn1 = (num) => {
  //   return (e) => {
  //     console.log(num);
  //   };
  // };

  fn1 = (num) => (e) => {
    console.log(num);
    console.log(e);
  };

  render() {
    return (
      <>
        <h3>事件处理（事件传参）</h3>
        <p>{this.state.count}</p>
        {/* 事件后面直接加括号，事件就会自执行 */}

        {/* bind会产生一个新函数，并且这个函数不会自动执行，它会把bind的第二个参数作为新函数的第一个参数 */}
        {/* <button onClick={this.fn1.bind(this, 3)}>btn1</button>
        <button onClick={this.fn1.bind(this, 4)}>btn2</button> */}

        {/* 多次渲染的话，会有很多个一样的箭头函数，这些函数会指向不同的地方 */}
        {/* <button onClick={() => this.fn1(3)}>btn1</button>
        <button onClick={() => this.fn1(4)}>btn2</button> */}

        <button onClick={this.fn1(3)}>btn1</button>
        <button onClick={this.fn1(4)}>btn2</button>
      </>
    );
  }
}

export default App2;

/*
  事件的传参
    1. 内联的使用bind 
    2. 使用内联的箭头函数
    3. 使用柯里化函数
*/
